<template>
  <div class="filter-wrap">
    <div class="bar-wrap">
      <div
        v-if="column.order"
        class="sort-wrap"
      >
        <i :class="column.order === 'asc' ? 'CaretLeft' : 'CaretBottom'"></i>
        <span>{{ column.order === 'asc' ? $demoi18n('view.table.asc') : $demoi18n('view.table.desc') }}</span>
      </div>
      <div
        v-else
        class="sort-wrap"
      >
        <span>{{ $demoi18n('view.table.unsorted') }}</span>
      </div>
      <div class="button-wrap">
        <el-icon @click="resetFilterEvent"><RefreshRight /></el-icon>
        <el-icon @click="closeFilterEvent"><Close /></el-icon>
      </div>
    </div>
    <div class="input-wrap">
      <el-form
        ref="form"
        :model="option"
        :rules="rules"
        @submit.prevent
      >
        <VsFormItem prop="data">
          <el-input
            v-model="option.data"
            :link="true"
            type="primary"
            :placeholder="$demoi18n('view.table.enter')"
            @keyup.enter="keyupEvent"
            @input="changeOptionEvent"
          ></el-input>
        </VsFormItem>
      </el-form>
    </div>
  </div>
</template>

<script>
import { genRulesByKey } from '@/utils/rules';

export default {
  name: 'FilterInput',
  props: ['params'],
  data() {
    return {
      ascIcon: new URL('../../common/table-icon/light/border-inner.png', import.meta.url).href,
      descIcon: new URL('../../common/table-icon/light/border-none.png', import.meta.url).href,
      column: null,
      option: null,
      rules: {
        data: genRulesByKey('data'),
      },
    };
  },
  created() {
    this.load();
  },
  methods: {
    changeOptionEvent() {
      const { params, option } = this;
      const { $panel } = params;
      const checked = Boolean(option.data);
      $panel.changeOption(null, checked, option);
    },
    keyupEvent($event) {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return;
        }
        const { params } = this;
        const { $panel } = params;
        if ($event.keyCode === 13) {
          $panel.confirmFilter();
        }
      });
    },
    load() {
      const { column } = this.params;
      const option = column.filters[0];
      this.column = column;
      this.option = option;
    },
    resetFilterEvent() {
      const { $panel } = this.params;
      $panel.resetFilter();
    },
    closeFilterEvent() {
      const { $table } = this.params;
      $table.closeFilter();
    },
  },
};
</script>

<style lang="less" scoped>
.filter-wrap {
  padding: 10px 12px 15px;
  .bar-wrap {
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
    .button-wrap {
      i {
        margin: 5px;
        cursor: pointer;
      }
    }
  }
}
.dark {
  .bar-wrap {
    color: #00f7ff;
  }
  .input-wrap {
    :deep(.el-input) {
      .el-input__wrapper {
        color: #ffffff;
        background-color: #000c17;
        border: 1px solid #116584;
        box-shadow: unset;
      }
    }
  }
}
</style>
